import React, { Component } from 'react'
import PropTypes from 'prop-types'; // 数据类型检查（之函数组件使用）

//import UserItem from '../UserItem'
import UserItemClass from '../UserItemClass'

export default class UserList extends Component {

    // 对复杂数据进行验证
    static propTypes = { // 该检查会在构造函数之前执行
        users: PropTypes.arrayOf(
            PropTypes.shape({
                id: PropTypes.number.isRequired,
                title: PropTypes.string.isRequired,
                completed: PropTypes.bool.isRequired
            })
        ),
        threeEditUserEnableFn: PropTypes.func //该参数类型要为函数
    }

    render() {
        return (
            <ul>
                {/* <UserItem /> */}
                {
                    this.props.users.map(user => {
                        return (
                            <UserItemClass 
                                threeEditUserEnableFn={this.props.threeEditUserEnableFn}
                                key={user.id}
                                // name={user.name}
                                // isEnable={user.isEnable}
                                // ...对象表示自动展开对象
                                {...user}
                            />
                        )
                    })
                }
            </ul>
        )
    }
}
